<template>
  <a-drawer v-model:open="open" :mask-closable="false" class="custom-class" root-class-name="root-class-name"
    width="30%" :title="props.type == 'add' ? '新增分类' : '编辑分类'" placement="right" @close="closebtn">
    <a-form ref="formRef" :model="formState.info" :rules="rules" layout="vertical">
      <a-form-item ref="avatar" label="头像" name="avatar">
        <uploadImg v-model:value="formState.info.avatar" />
      </a-form-item>
      <a-form-item ref="nickName" label="会员名称" name="nickName">
        <a-input v-model:value="formState.info.nickName" />
      </a-form-item>
      <a-form-item ref="gender" label="性别" name="gender">
        <a-radio-group v-model:value="formState.info.gender" name="radioGroup">
          <a-radio :value="1">男</a-radio>
          <a-radio :value="2">女</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item ref="tagIds" label="用户标签" name="tagIds">
        <a-cascader mode="multiple" v-model:value="formState.info.tagIds" style="width: 100%" max-tag-count="responsive"
          :options="optinoslist" placeholder="请选择" multiple></a-cascader>
      </a-form-item>
      <a-form-item ref="mobile" label="手机号" name="mobile">
        <a-input v-model:value="formState.info.mobile" placeholder="请输入手机号" />
      </a-form-item>
      <a-form-item ref="isDietitian" label="是否营养师" name="isDietitian">
        <a-switch v-model:checked="formState.info.isDietitian" checked-children="是" un-checked-children="否" />
      </a-form-item>
    </a-form>
    <template #footer>
      <div style="display: flex; justify-content: flex-end">
        <a-button style="margin-right: 8px" @click="closebtn">取消</a-button>
        <a-button type="primary" :loading="loading" @click="infobtn">确定</a-button>
      </div>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch, inject } from "vue";

import { message } from "ant-design-vue";

import * as api from "#/api/core/user";
import uploadImg from "#/components/uploadImg/index.vue";



const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: "add",
  },
  editdata: {
    type: Object,
    default: () => { },
  },
  catalist: {
    type: Array,
    default: () => []
  }
});

const emits = defineEmits(["update:value", "submit", "close"]);
const optinoslist = computed({
  get() {
    console.log('object :>> ', props.catalist);

    return props.catalist
  },
  set() {

  }
})
const formRef = ref();
const rules = {
  nickName: [
    {
      required: true,
      message: "请输入名称",
      trigger: "change",
    },
  ],
  mobile: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "change",
    }, {
      min: 11,
      max: 11,
      message: "请输入正确格式手机号",
    }
  ],
};



const formState = reactive({
  info: {
    nickName: "",
    "avatar": "",
    "mobile": "",
    "isDietitian": false,
    "gender": 1,
    "tagIds": [],
    "dietitianId": ""
  },
});

const loading = ref(false);

watch(
  () => props.value,
  (newV) => {
    console.log("props", props.editdata);

    if (newV && props.type == "update") {
      formState.info.nickName = props.editdata?.nickName
      formState.info.avatar = props.editdata?.avatar
      formState.info.mobile = props.editdata?.mobile
      formState.info.tagIds = props.editdata?.tagIds
      // formState.info.dietitianId = props.editdata?.dietitianId
      formState.info.isDietitian = props.editdata?.isDietitian

    } else {

    }
  },
  {
    immediate: true,
  }
);

const open = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits("update:value", val);
  },
});




const infobtn = () => {
  console.log("info", formState.info);

  formRef.value
    .validate()
    .then(async () => {
      loading.value = true;
      try {

        if (props.type == "add") {
          // await api.$updateuser(
          //   props.editdata.id,
          //   {
          //     ...formState.info,
          //     fullName: '',
          //   });
          // message.success("添加成功");

          // open.value = false;
          // loading.value = false;
          // emits("submit");
        } else {
          await api.$updateuser(
            props.editdata.id,
            {
              ...formState.info,
              tagIds: formState.info.tagIds ? formState.info.tagIds[0] : [],
              fullName: '默认',
            });
          message.success("编辑成功");
          loading.value = false;

          open.value = false;
          emits("submit");
        }
        // debugger
      } catch (error) {
        console.log("error", error);
        loading.value = false
      }
    })
    .catch((error: any) => {
      console.log("error", error);
    });
};

const closebtn = () => {
  open.value = false;
  formState.info.name = "";
  formState.info.description = "";
  formState.info.icon = "";
  emits("close");
};
</script>
